<!--   -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Bind</title>
</head>

<body>
    <div onclick="go(11)">xxx</div>
    <div id="yyy">yyy</div>
    <div class="mouseEnterTest"></div>
    <button class="help">Help</button>
    <div class="menu">
        <ul>
            <li>aaa</li>
            <li>nnn</li>
            <li>sssss</li>
        </ul>
    </div>
    <button class="aaa">aaa</button>
    <button class="bbb">bbb</button>
    <button class="ccc">ccc</button>
    <div></div>
    username:<input type="text" id="username">
    password:<input type="text" id="password">
    <form action="xxx">
        <button class="submit">aa</button>
    </form>
    <a href="xx" class="btn">next</a>
    <button class="right-change">right</button>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <!-- <select>
        <option>xxx</option>
        <option>yyy</option>
    </select> -->
    <input class="auto-complete" />
    <div class="suggest"></div>
    <style>
        .suggest {
            width: 180px;
            height: 60px;
            border: solid 3px red;
            visibility: hidden;
        }

        .father {
            background-color: cornflowerblue;
            width: 300px;
            height: 200px;
            padding: 40px;
        }

        .son1 {
            background-color: peru;
            width: 80px;
            height: 70px;
            margin: 30px;
        }

        .son2 {
            background-color: purple;
            width: 60px;
            height: 80px;
            margin: 30px;
        }

        .help {}

        .menu {
            width: 80px;
            height: 200px;
            background-color: cadetblue;
            /* display: none; */
            visibility: hidden;
        }

        .mouseEnterTest {
            background-color: brown;
            width: 100px;
            height: 60px;
        }
    </style>
    <script>
        let auto = document.querySelector(".auto-complete")
        let suggest = document.querySelector(".suggest")
        auto.addEventListener("focus",()=>{
                suggest.style.visibility = "visible"
        });
        suggest.addEventListener("click",()=>{
            suggest.style.visibility = "hidden"
        });

        let help = document.querySelector('.help');
        let menu = document.querySelector('.menu');
        help.addEventListener("mouseenter", () => {

            menu.style.visibility = "visible";
        });

        help.addEventListener("mouseleave", () => {
            menu.style.visibility = "hidden"
        });


        function go(m) {
            console.log("传统方式", m);
            console.log("传统方式", event.target);
        }
        let p = document.querySelector("#yyy")
        p.addEventListener("click",
            // go
            (event) => {
                console.log(event.target)
                go(11);
                // console.log("新方式",10)
            });
        document.querySelector(".mouseEnterTest")
            //  mouseenter mouseleave  
            //  mouseover mouseout
            .addEventListener("mouseenter", (e) => {
                console.log("xxxx");
            });
        document.querySelector(".bbb")
            .addEventListener("focus", (e) => {
                console.log("xxxxxxxxxxxx")
            })
        let inputUsername = document.querySelector("#username");
        let inputPassword = document.querySelector("#password");
        inputUsername.addEventListener("focus", () => {
            console.log("username")
        });

        inputUsername.addEventListener("blur", (e) => {
            console.log("username validate valid");
            console.log(inputUsername.value)
            // console.log(e.target.value)
            let r = /^[a-zA-Z0-9_]{5,8}$/
            if (r.test(inputUsername.value)) {
                console.log("valid !!!");
            } else {
                console.log("un valid !!!")
            }
        })

        inputPassword.addEventListener("keyup", (event) => {
            console.log("inputPassword");
        })
        // event 对象功能一  阻止默认事件
        document.querySelector("form .submit")
            .addEventListener("click", (event) => {
                event.preventDefault();
                console.log("usernamexxx")
            });
        let btn = document.querySelector(".btn");
        btn.addEventListener("click", (e) => {
            console.dir(e)
            // console.log("username")
            e.preventDefault();
        });
        let rightButton = document.querySelector(".right-change");
        rightButton.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            console.dir(e);
        })
        // 父标签与子标签嵌套会产生事件传播 事件流 
        let father = document.querySelector(".father")
        let son1 = document.querySelector(".son1")
        let son2 = document.querySelector(".son2")
        /*        father.addEventListener("click", (e) => {
                   console.log(father.className);
               },false);
               son1.addEventListener("click", (e) => {
                   // 阻止冒泡阶段事件传播
                   e.stopPropagation();
                   console.log(son1.className);
       
               },false);
       
               
               son2.addEventListener("click", (e) => {
                   console.log(son2.className);
               },false); */

        // father.addEventListener("click", (e) => {
        //     console.log("捕获阶段",father.className);
        // },true);
        // son1.addEventListener("click", (e) => {
        //     // e.stopPropagation();
        //     console.log("捕获阶段",son1.className);

        // },true);


        // son2.addEventListener("click", (e) => {
        //     console.log("捕获阶段",son2.className);
        // },true);
        //  选择鼠标hover效果监听器 时 
        //  优先考虑mouseenter与mouseleave，
        //  而不是mouseover与mouseout

        father.addEventListener("click", (e) => {
            console.log(father.className);
            console.log(e);
            console.log(e.target)
            console.log(e.target === father)
            console.log(e.currentTarget === father)
        }, false);
        son1.addEventListener("click", (e) => {
            // 阻止冒泡阶段事件传播
            e.stopPropagation();
            console.log(son1.className);

        }, false);


        son2.addEventListener("click", (e) => {
            console.log(son2.className);
        }, false);
    </script>
</body>

</html>